<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta name="description" content="Linframe是国内推出的一个用于前端开发的开源工具包。它由lindf开发，是一个CSS/HTML框架。目前，Linframe最新版本为1.0 。Linframe中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。">
    <meta name="keywords" content="Linframe,CSS,CSS框架,CSS framework,javascript,bootcss,bootstrap开发,bootstrap代码,bootstrap入门">
    <meta name="author" content="lindingfeng">
    <meta name="robots" content="index,follow">
    <meta name="application-name" content="lindf.com">
    <title>Javascript插件</title>
    <link rel="icon" href="img/icon4.ico"/>
    <link rel="stylesheet" href="css/lindf.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body style="">
<!-- 顶部导航 -->
<div style="background-color: #222;">
    <div class="container" style="position: relative; z-index: 10;">
        <div class="navbar navbar-inverse">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0);">Linframe</a>
            </div>
            <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="http://www.lindf.com/index.html">起步</a></li>
                    <li><a href="http://www.lindf.com/GlobalCss.html">全局 CSS 样式</a></li>
                    <li><a href="http://www.lindf.com/Assembly.html">组件样式</a></li>
                    <li class="active"><a href="http://www.lindf.com/JsConnector.html">JavaScript样式</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-nav-right ">
                    <li><a class="" href="https://git.oschina.net/lindingfeng/lindfqianduankuangjia.git" target="_blank">GitHub</a></li>
                    <li><a class="" href="http://www.lindf.com/Resume.html">个人简历</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 头部面板 -->
<div class="bs-docs-header">
    <div class="jumbotron">
        <div class="container" style="padding: 0 15px;">
            <h1>Javascript 插件</h1>
            <p>jQuery 插件为 Linframe 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。</p>
            <p style="margin-bottom: 0;"><a class="btn btn-primary btn-lg" href="#" role="button">Learn More</a></p>
        </div>
    </div>
</div>

<!-- 主体部分 -->
<div class="container">
    <!-- 右侧固定列表 -->
    <div class="col-md-3" style="padding-left: 0;">
        <div class="hidden-xs hidden-sm" data-panel="Collapse" style="">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">栅格系统</h4>
                </div>
                <ul class="list-group"  style="display: block;">
                    <li class="list-group-item">状态框</li>
                    <li class="list-group-item">选项卡</li>
                    <li class="list-group-item">滚动监听</li>
                    <li class="list-group-item">折叠面板</li>
                    <li class="list-group-item">警告框</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 中间主体 -->
    <div class="col-md-9 right clear" style="background-color:transparent;">
        <div class="contant clear">
            <!-- **************************状态框*************************** -->
            <!-- 状态框静态实例 -->
            <h2 style="margin-bottom: 10px;">状态框静态实例</h2>
            <p>
                以下模态框包含了模态框的头、体和一组放置于底部的按钮。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="contant">
                    <div class="static-modal-content" style="">
                        <div class="modal-content-heading">
                            <h4>Modal title</h4>
                        </div>
                        <div class="modal-content-body">
                            <p>
                                Overflowing text to show scroll behavior

                                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            </p>
                        </div>
                        <div class="modal-content-footer">
                            <div class="text-right">
                                <button class="btn btn-default">Close</button>
                                <button class="btn btn-primary">Save Change</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"contant"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"static-modal-content"</span>&gt;
        <span class="v">&lt;div <span class="s">class=</span><span class="c">"modal-content-heading"</span>&gt;
            <span class="v">&lt;h4&gt;<span>Modal title</span><span class="v">&lt;/h4&gt;</span></span>
        <span class="v">&lt;/div&gt;</span></span>
        <span class="v">&lt;div <span class="s">class=</span><span class="c">"modal-content-heading"</span>&gt;
            <span class="v">&lt;p&gt;<span>......</span><span class="v">&lt;/p&gt;</span></span>
        <span class="v">&lt;/div&gt;</span></span>
        <span class="v">&lt;div <span class="s">class=</span><span class="c">"modal-content-footer"</span>&gt;
            <span class="v">&lt;div <span class="s">class=</span><span class="c">"text-right"</span>&gt;
                <span class="v">&lt;button  <span class="s">class=</span><span class="c">"btn btn-default"</span>&gt;<span>Close</span><span class="v">&lt;/button&gt;</span></span>
                <span class="v">&lt;button  <span class="s">class=</span><span class="c">"btn btn-primary"</span>&gt;<span>Save Change</span><span class="v">&lt;/button&gt;</span></span>
            <span class="v">&lt;/div&gt;</span></span>
        <span class="v">&lt;/div&gt;</span></span>
    <span class="v">&lt;/div&gt;</span></span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 状态框动态实例 -->
            <h2 style="margin-bottom: 10px;">状态框动态实例</h2>
            <p>
                点击下面的按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div data-modal="modal">
                    <!-- 遮罩层 -->
                    <div class="modal-hide" style="">111</div>
                    <!-- 状态框 -->
                    <div class="modal-content" style="">
                        <div class="modal-content-heading">
                            <h4>Modal title</h4>
                        </div>
                        <div class="modal-content-body">
                            <p>
                                Overflowing text to show scroll behavior

                                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                            </p>
                        </div>
                        <div class="modal-content-footer">
                            <div class="text-right">
                                <button class="btn btn-default">Cloae</button>
                                <button class="btn btn-primary">Save Change</button>
                            </div>
                        </div>
                    </div>
                    <!-- 触发状态框 -->
                    <button class="modal-btn btn btn-primary"> demo modal </button>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">data-modal=</span><span class="c">"modal"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"modal-hide"</span>&gt;</span><span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"static-modal-content"</span>&gt;
        <span class="v">&lt;div <span class="s">class=</span><span class="c">"modal-content-heading"</span>&gt;
            <span class="v">&lt;h4&gt;<span>Modal title</span><span class="v">&lt;/h4&gt;</span></span>
        <span class="v">&lt;/div&gt;</span></span>
        <span class="v">&lt;div <span class="s">class=</span><span class="c">"modal-content-heading"</span>&gt;
            <span class="v">&lt;p&gt;<span>......</span><span class="v">&lt;/p&gt;</span></span>
        <span class="v">&lt;/div&gt;</span></span>
        <span class="v">&lt;div <span class="s">class=</span><span class="c">"modal-content-footer"</span>&gt;
            <span class="v">&lt;div <span class="s">class=</span><span class="c">"text-right"</span>&gt;
                <span class="v">&lt;button  <span class="s">class=</span><span class="c">"btn btn-default"</span>&gt;<span>Close</span><span class="v">&lt;/button&gt;</span></span>
                <span class="v">&lt;button  <span class="s">class=</span><span class="c">"btn btn-primary"</span>&gt;<span>Save Change</span><span class="v">&lt;/button&gt;</span></span>
            <span class="v">&lt;/div&gt;</span></span>
        <span class="v">&lt;/div&gt;</span></span>
    <span class="v">&lt;/div&gt;</span></span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"modal-btn btn btn-primary"</span>&gt;</span> demo modal <span class="v">&lt;/button&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- **************************选项卡*************************** -->
            <!-- 选项卡 -->
            <h2 style="margin-bottom: 10px;">选项卡</h2>
            <p>
                Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported.
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="tabs">
                    <ul class="nav nav-tabs nav-justified">
                        <li class="active"><a href="javascript:void(0);">Home</a></li>
                        <li><a href="javascript:void(0);">Profile</a></li>
                        <li><a href="javascript:void(0);">Messages</a></li>
                        <li><a href="javascript:void(0);">About</a></li>
                    </ul>
                    <div class="tabs-content">
                        <div class="text-center" style="line-height: 100px;font-size: 30px;">First Tab</div>
                        <div class="text-center" style="line-height: 100px;font-size: 30px;">Second Tab</div>
                        <div class="text-center" style="line-height: 100px;font-size: 30px;">Third Tab</div>
                        <div class="text-center" style="line-height: 100px;font-size: 30px;">Fourth Tab</div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"tabs"</span>&gt;</span>
    <span class="v">&lt;ul <span class="s">class=</span><span class="c">"nav nav-tabs nav-justified"</span>&gt;
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"active"</span>&gt;
            <span class="v">&lt;a  <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;<span>Home</span><span class="v">&lt;/a&gt;</span></span>
        <span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li&gt;
            <span class="v">&lt;a  <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;<span>Profile</span><span class="v">&lt;/a&gt;</span></span>
        <span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li&gt;
            <span class="v">&lt;a  <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;<span>Messages</span><span class="v">&lt;/a&gt;</span></span>
        <span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li&gt;
            <span class="v">&lt;a  <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;<span>About</span><span class="v">&lt;/a&gt;</span></span>
        <span class="v">&lt;/li&gt;</span></span>
    <span class="v">&lt;/ul&gt;</span></span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"nav nav-tabs nav-justified"</span>&gt;
        <span class="v">&lt;div&gt;First Tab<span class="v">&lt;/div&gt;</span></span>
        <span class="v">&lt;div&gt;Second Tab<span class="v">&lt;/div&gt;</span></span>
        <span class="v">&lt;div&gt;Third Tab<span class="v">&lt;/div&gt;</span></span>
        <span class="v">&lt;div&gt;Fourth Tab<span class="v">&lt;/div&gt;</span></span>
    <span class="v">&lt;/div&gt;</span></span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- ************************滚动监听************************** -->
            <!-- 滚动监听 -->
            <h2 style="margin-bottom: 10px;">滚动监听</h2>
            <p>
                滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。如下所示，滚动导航条下面的区域并关注导航项的变化。下拉菜单中的条目也会自动高亮显示。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="scroll">
                    <ul class="nav nav-pills nav-pills-danger nav-justified">
                        <li role="presentation" class="active"><a href="#div1">Home</a></li>
                        <li role="presentation" class=""><a href="#div2">Name</a></li>
                        <li class="" role="presentation"><a href="#div3">Profile</a></li>
                        <li role="presentation"><a href="#div4">Messages</a></li>
                        <li role="presentation"><a href="#div5">Adress</a></li>
                        <li role="presentation"><a href="#div6">About</a></li>
                    </ul>
                    <!--<div style="height: 40px;"></div>-->
                    <div class="scroll-item" style="height: 300px;overflow: auto;">
                        <div>
                            <h3>
                                <span>Home</span>
                            </h3>
                            <p style="text-indent: 1em;">this is Home this is Home this is Home this is Home this is Home this is Home</p>
                            <br><br><br>
                        </div>
                        <div>
                            <h3>
                                <span>Name</span>
                            </h3>
                            <p style="text-indent: 1em;">this is Name this is Name this is Name this is Name this is Name this is Name</p>
                            <br><br><br>
                        </div>
                        <div>
                            <h3>
                                <span>Profile</span>
                            </h3>
                            <p style="text-indent: 1em;">this is Profile this is Profile this is Profile this is Profile this is Profile</p>
                            <br><br><br>
                        </div>
                        <div>
                            <h3>
                                <span>Messages</span>
                            </h3>
                            <p style="text-indent: 1em;">this is Messages this is Messages this is Messages this is Messages this is Messages</p>
                            <br><br><br>
                        </div>
                        <div>
                            <h3>
                                <span>Adress</span>
                            </h3>
                            <p style="text-indent: 1em;">this is Adress this is Adress this is Adress this is Adress this is Adress </p>
                            <br><br><br>
                        </div>
                        <div>
                            <h3>
                                <span>About</span>
                            </h3>
                            <p style="text-indent: 1em;">this is About this is About this is About this is About this is About this is About</p>
                            <br><br><br>
                        </div>
                        <div>
                            <h3>
                                <span>Link</span>
                            </h3>
                            <p style="text-indent: 1em;">this is Link this is Link this is Link this is Link this is Link this is Link</p>
                            <br><br><br>
                        </div>
                        <div>
                            <h3>
                                <span>Link</span>
                            </h3>
                            <p style="text-indent: 1em;">this is Link this is Link this is Link this is Link this is Link this is Link</p>
                            <br><br><br>
                        </div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"scroll"</span>&gt;</span>
    <span class="v">&lt;ul <span class="s">class=</span><span class="c">"nav nav-pills nav-pills-danger nav-justified"</span>&gt;
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"active"</span>&gt;
            <span class="v">&lt;a  <span class="s">href=</span><span class="c">"#div1"</span>&gt;<span>Home</span><span class="v">&lt;/a&gt;</span></span>
        <span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li&gt;
            <span class="v">&lt;a  <span class="s">href=</span><span class="c">"#div2"</span>&gt;<span>Profile</span><span class="v">&lt;/a&gt;</span></span>
        <span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li&gt;
            <span class="v">&lt;a  <span class="s">href=</span><span class="c">"#div3"</span>&gt;<span>Messages</span><span class="v">&lt;/a&gt;</span></span>
        <span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li&gt;
            <span class="v">&lt;a  <span class="s">href=</span><span class="c">"#div4"</span>&gt;<span>About</span><span class="v">&lt;/a&gt;</span></span>
        <span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li&gt;
            <span class="v">&lt;a  <span class="s">href=</span><span class="c">"#div5"</span>&gt;<span>Messages</span><span class="v">&lt;/a&gt;</span></span>
        <span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li&gt;
            <span class="v">&lt;a  <span class="s">href=</span><span class="c">"#div6"</span>&gt;<span>About</span><span class="v">&lt;/a&gt;</span></span>
        <span class="v">&lt;/li&gt;</span></span>
    <span class="v">&lt;/ul&gt;</span></span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"scroll-item"</span>&gt;
        <span class="v">&lt;div&gt;
            <span class="v">&lt;h3&gt;Home<span class="v">&lt;/h3&gt;</span></span>
            <span class="v">&lt;p&gt;..................<span class="v">&lt;/p&gt;</span></span>
        <span class="v">&lt;/div&gt;</span></span>
        <span class="v">......</span>
        <span class="v">......</span>
    <span class="v">&lt;/div&gt;</span></span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- **************************折叠面板*************************** -->
            <!-- 折叠面板 -->
            <h2 style="margin-bottom: 10px;">折叠面板</h2>
            <p>
                Extend the default collapse behavior to create an accordion with the panel component.
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="test" data-panel="Collapse1">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h4 class="">栅格系统</h4>
                        </div>
                        <ul class="list-group" style="display: block;">
                            <li class="list-group-item">简介</li>
                            <li class="list-group-item">媒体查询</li>
                            <li class="list-group-item">栅格参数</li>
                            <li class="list-group-item">实例：响应式布局</li>
                        </ul>
                    </div>
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h4 class="">排版、代码</h4>
                        </div>
                        <ul class="list-group" style="display: none;">
                            <li class="list-group-item">标题</li>
                            <li class="list-group-item">内联文本元素</li>
                            <li class="list-group-item">文本对齐</li>
                            <li class="list-group-item">文本大小写</li>
                        </ul>
                    </div>
                    <div class="panel panel-info"  style="margin-bottom: 0;">
                        <div class="panel-heading">
                            <h4 class="">表格</h4>
                        </div>
                        <ul class="list-group" style="display: none;">
                            <li class="list-group-item">基本表格</li>
                            <li class="list-group-item">条纹状表格</li>
                            <li class="list-group-item">带边框表格</li>
                            <li class="list-group-item">鼠标悬停表格</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"Collapse"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-info"</span>&gt;
        <span class="v">&lt;div  <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;
            <span class="v">&lt;h4&gt;栅格系统<span class="v">&lt;/h4&gt;</span></span>
        <span class="v">&lt;/div&gt;</span></span>
    <span class="v">&lt;/div&gt;</span></span>
    <span class="v">&lt;ul <span class="s">class=</span><span class="c">"list-group"</span>&gt;
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;简介<span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;媒体查询<span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;栅格参数<span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;实例：响应式布局<span class="v">&lt;/li&gt;</span></span>
    <span class="v">&lt;/ul&gt;</span></span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-info"</span>&gt;
        <span class="v">&lt;div  <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;
            <span class="v">&lt;h4&gt;排版、代码<span class="v">&lt;/h4&gt;</span></span>
        <span class="v">&lt;/div&gt;</span></span>
    <span class="v">&lt;/div&gt;</span></span>
    <span class="v">&lt;ul <span class="s">class=</span><span class="c">"list-group"</span>&gt;
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;标题<span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;内联文本元素<span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;文本对齐<span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;文本大小写<span class="v">&lt;/li&gt;</span></span>
    <span class="v">&lt;/ul&gt;</span></span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-info"</span>&gt;
        <span class="v">&lt;div  <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;
            <span class="v">&lt;h4&gt;表格<span class="v">&lt;/h4&gt;</span></span>
        <span class="v">&lt;/div&gt;</span></span>
    <span class="v">&lt;/div&gt;</span></span>
    <span class="v">&lt;ul <span class="s">class=</span><span class="c">"list-group"</span>&gt;
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;基本表格<span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;条纹状表格<span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;带边框表格<span class="v">&lt;/li&gt;</span></span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;鼠标悬停表格<span class="v">&lt;/li&gt;</span></span>
    <span class="v">&lt;/ul&gt;</span></span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- *************************警告框*************************** -->
            <!-- 警告框实例 -->
            <h2 style="margin-bottom: 10px;">警告框实例</h2>
            <p>
                通过此插件可以为警告信息添加点击并消失的功能
                当使用 <code>.close</code> 按钮时，它必须是 <code>.alert-dismissible</code> 的第一个子元素，并且在它之前不能有任何文本内容。
            </p>
            <div class="bs-callout bs-callout-primary">
                <h4>依赖警告框 JavaScript 插件</h4>
                <p>
                    如果需要为警告框组件提供关闭功能，请使用 jQuery 警告框插件。
                </p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <div class="alert alert-success alert-dismissible">
                    <div><strong>Success!</strong> Better check yourself, you're not looking too good (slideUp关闭效果).</div>
                    <span class="close close-slideUp">&times;</span>
                </div>
                <div class="alert alert-info alert-dismissible">
                    <div><strong>Info!</strong> Better check yourself, you're not looking too good (hide关闭效果).</div>
                    <span class="close close-hide">&times;</span>
                </div>
                <div class="alert alert-warning alert-dismissible">
                    <div><strong>Warning!</strong> Better check yourself, you're not looking too good (fadeOut关闭效果).</div>
                    <span class="close close-fadeOut">&times;</span>
                </div>
                <div class="alert alert-danger alert-dismissible" style="margin-bottom: 0;">
                    <div><strong>Danger!</strong> Better check yourself, you're not looking too good (无关闭效果).</div>
                    <span class="close">&times;</span>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-success alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-info alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-warning alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-danger alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
</span></code></pre>
            </div>
            <!-- *********************************************************** -->
        </div>
    </div>
</div>

<!-- 底部 -->
<div class="bs-docs-footer">
    <div class="container">
        <ul class="bs-docs-footer-links">
            <li><a href="javascript:void(0);">GitHub 仓库</a></li>
            <li><a href="javascript:void(0);">捐助我们</a></li>
            <li><a href="javascript:void(0);">友情链接</a></li>
            <li><a href="javascript:void(0);">关于</a></li>
        </ul>
        <p>
            Designed and built with all the love in the world by <a href="javascript:void(0);">@mdo</a> and <a href="javascript:void(0);">@fat</a>. Maintained by the <a href="javascript:void(0);">core team</a> with the help of our contributors.
        </p>
        <p>
            本项目源码受 <a href="javascript:void(0);">MIT</a>开源协议保护，文档受 <a href="javascript:void(0);">CC BY 3.0</a> 开源协议保护。
        </p>
    </div>
</div>

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/lindf.js"></script>
<script src="js/JsConnector.js"></script>
</body>
</html>